<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="css/api.css"/>
    <style>
    	html,body{
    		background: #333543;
    	}
.login_content {
    width: 100%;
}
.login_bg {
    width: 40%;
    margin: 80px auto;
}
.login_bg img {
    width: 100%;
}
.login_conttn {
    padding: 0 15px;
}
.list_input {
    background: #474956;
    height: 50px;
    width: 100%;
    color: #fff;
    box-sizing: border-box;
    border: 0;
    border-radius: 5px;
    font-size: 16px;
    padding: 0 0 0 15px;
}
.list_login_input {
    padding-bottom: 15px;
}
.data_items {
    position: relative;
    margin-bottom: 15px;
}
.data_items .input_icon {
    width: 18px;
    height: auto;
    display: block;
    position: absolute;
    top: 15px;
    left: 15px;
}
.data_items .input_icon img {
    width: 100%;
}
.data_items .list_input {
    padding-left: 40px;
}
.list_button {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 5px;
    background: #ec6d65;
    color: #fff;
    font-size: 18px;
}

    </style>
</head>
<body>
	<div class=" login_content">
        <div class="login_bg">
            <img src="image/login_bg.png">
        </div>
        <div class="login_conttn">
            <div class="list_login_input">
                <div class="data_items">
                    <span class="input_icon"><img src="image/user_icon.png"></span>               
                    <input id="login_name" type="text" class="list_input" placeholder="请输入用户名">
                </div>
                <div class="data_items">
                    <span class="input_icon"><img src="image/password_icon.png"></span>               
                    <input id="login_pwd" type="password" class="list_input" placeholder="请输入密码">
                </div>
            </div>
            <button id="login_btn" class="list_button" onclick="loginSubmit();">登录</button>
        </div>
    </div>
</body>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript" src="script/urlpath.js"></script>
<script type="text/javascript">
	apiready = function(){
        readyStorage();
        api.addEventListener({
            name:'viewappear'
        },function(ret,err){
            readyStorage();
        });
        api.addEventListener({
            name:'keyback'
        },function(ret,err){
            
        });
	};
    function readyStorage(){
        var storageUserName = $api.getStorage("login_name");
        var storagePwd = $api.getStorage("pwd");
        if(storageUserName != undefined && storageUserName && storagePwd != undefined && storagePwd){
            var login_name = $api.byId("login_name");
            $api.val(login_name,storageUserName);
            var login_pwd = $api.byId("login_pwd");
            $api.val(login_pwd,storagePwd);
        }else{
            $api.val($api.byId("login_name"),"");
            $api.val($api.byId("login_pwd"),"");
        }
    }
    $api.addEvt($api.byId("login_btn"), 'touchstart', function(e) {
        $api.css($api.byId("login_btn"),'background:#F9817A;');
    });
    $api.addEvt($api.byId("login_btn"), 'touchend', function(e) {
        $api.css($api.byId("login_btn"),'background:#ec6d65;');
    });
    function loginSubmit(){
        var login_name = $api.byId("login_name");
        var loginNameVal = $api.val(login_name);
        var login_pwd = $api.byId("login_pwd");
        var loginPwdVal = $api.val(login_pwd);
        if(loginNameVal == null || loginNameVal == ""){
            // alert("请输入正确的用户名");
            api.toast({
                msg: '请输入正确的用户名',
                duration: 2000,
                location: 'middle'
            });
        }else if(loginPwdVal == null || loginPwdVal == ""){
            api.toast({
                msg: '请输入密码',
                duration: 2000,
                location: 'middle'
            });
        }else{
            api.showProgress({
                style: 'default',
                animationType: 'fade',
                title: '努力加载中...',
                text: '请稍候...',
                modal: false
            });
            api.ajax({
                url: URLpath+'/login/submit?format=json',
                method: 'post',
                data: {
                    values: { 
                        "user_name":loginNameVal,
                        "pwd":loginPwdVal
                    }
                },
                timeout:5
            },function(ret, err){
                api.hideProgress();
                if (ret) {
                    if (ret.redirect_to == "/index") {
                        $api.setStorage("login_name",loginNameVal);
                        $api.setStorage("pwd",loginPwdVal);
                        openWinIndex();
                    }else{
                        api.toast({
                            msg: '登录失败',
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                } else {
                    api.confirm({
                        title: '系统提示',
                        msg: '网络请求超时，下拉刷新试试？',
                        buttons: ['确定']
                    },function( ret, err ){
                        
                    });
                }
            });
            function openWinIndex(){
                api.openWin({
                    name: 'index',
                    slidBackEnabled:false,
                    animation:{
                        type:"push",                
                        subType:"from_right",       
                        duration:300,               
                        curve:"ease_out"
                    },
                    url: URLpath+'/respagenew/call/venderappnew/index.html',
                });
            }
        }
    }



    









</script>
</html>